<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放页面</title>
    <style>
        body {
            align-content: center;
        }
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <a href="./albumIndex.html">返回</a>
    <img>
    <audio></audio>
    <button class="playPause">播放</button>
    <button class="prev">上一首</button>
    <button class="next">下一首</button>
    <div>当前时间: <span class="currentTime"></span></div>
    <div>总时间: <span class="duration"></span></div>
    <div>
        <input type="text" id="progress"><button class="jumpTo">跳到此处</button>
    </div>
    <button class="volumeUp">声音增加</button>
    <button class="volumeDown">声音减少</button>

    <script>
        window.onload = function () {
            var xhr = new XMLHttpRequest()
            xhr.open('get', '/studio/album/display.json' + location.search)
            xhr.onload = function () {
                var data = JSON.parse(xhr.responseText)
                document.querySelector('img').src = data.cover
                var sings = data.tids
                console.log(sings)
                var total = sings.length
                var currentIndex = 0
                var playing = false
                var oAudio = document.querySelector('audio')
                oAudio.src = `/studio/track/track.om?tid=${sings[0]}`
                document.querySelector('.playPause').onclick = function() {
                    if (playing) {
                        oAudio.pause()
                        this.textContent = '播放'
                    } else {
                        oAudio.play()
                        this.textContent = '暂停'
                    }

                    playing = !playing
                }

                document.querySelector('.prev').onclick = function() {
                    currentIndex--;
                    if (currentIndex < 0) {
                        currentIndex = total - 1;
                    }
                    oAudio.src = `/studio/track/track.om?tid=${sings[currentIndex]}`
                    // 延续上次的状态
                    if (playing) {
                        oAudio.play()
                    } else {
                        oAudio.pause()
                    }
                }


                document.querySelector('.next').onclick = function() {
                    currentIndex++;
                    if (currentIndex >= total) {
                        currentIndex = 0;
                    }
                    oAudio.src = `/studio/track/track.om?tid=${sings[currentIndex]}`
                    // 延续上次的状态
                    if (playing) {
                        oAudio.play()
                    } else {
                        oAudio.pause()
                    }
                }

                oAudio.ontimeupdate = function() {
                    var ct = oAudio.currentTime
                    var ctm = Math.floor(ct / 60)
                    var cts = Math.floor(ct % 60)
                    document.querySelector('.currentTime').textContent = ctm + ":" + cts


                    var dt = oAudio.duration
                    var dtm = Math.floor(dt / 60)
                    var dts = Math.floor(dt % 60)
                    document.querySelector('.duration').textContent = dtm + ":" + dts
                }

                document.querySelector('.jumpTo').onclick = function() {
                    var p = parseInt(document.querySelector('#progress').value)
                    if (p < 0) { p = 0 }
                    if (p > 100) { p = 100 }

                    var ct = p / 100 * oAudio.duration;
                    oAudio.currentTime = ct

                    document.querySelector('#progress').value = ''
                    // 延续上次的状态
                    if (playing) {
                        oAudio.play()
                    } else {
                        oAudio.pause()
                    }
                }

                document.querySelector('.volumeUp').onclick = function() {
                    var volume = oAudio.volume;
                    volume += 0.1
                    if (volume > 1) {
                        volume = 1
                    }
                    oAudio.volume = volume
                }

                document.querySelector('.volumeDown').onclick = function() {
                    var volume = oAudio.volume;
                    volume -= 0.1
                    if (volume < 0) {
                        volume = 0
                    }
                    oAudio.volume = volume
                }
            }
            xhr.send()
        }
    </script>
</body>
</html>